import { Component } from 'react';
import { Link, Redirect, history } from 'umi';
import { Layout, Menu, Modal, Breadcrumb,message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

import styles from './index.less';


const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
const { confirm } = Modal;
const selectedKeys = sessionStorage.getItem('selectedKeys');
const openKeys = sessionStorage.getItem('openKeys');

class Main extends Component<any> {
	state = {
		selectedKeys: selectedKeys ? JSON.parse(selectedKeys) : ['0'],
		openKeys: openKeys ? JSON.parse(openKeys) : [],
		rootSubmenuKeys: ['1', '2', '0'],
		menuList: [{
			id: '1',
			name: 'Example',
			children: [{
				id: '1-1',
				name: 'Unit',
				path: '/unit'
			}, {
				id: '1-2',
				name: 'Fetch',
				path: '/fetch'
			},{
				id: '1-3',
				name: 'Dva',
				path: '/dva'
			}]
		}, {
			id: '2',
			name: 'Else',
			children: [{
				id: '2-1',
				name: 'Error',
				path: '/error'
			}]
		}]
	}

	selectChange = ({ selectedKeys }: any) => {
		if (selectedKeys[0] === "0") {
			sessionStorage.setItem('openKeys', '[]');
			this.setState({
				openKeys: []
			})
		}
		sessionStorage.setItem('selectedKeys', JSON.stringify(selectedKeys));
		this.setState({
			selectedKeys: selectedKeys
		})
	}
	onOpenChange = (keys: any) => {
		// keys永远为两个元素的数组，第一个是关闭的SubmenuKey，第二个是展开的SubmenuKey
		const { rootSubmenuKeys, openKeys } = this.state
		const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
		if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
			this.setState({ openKeys });
		} else {
			this.setState({
				openKeys: openKeys ? [latestOpenKey] : [],
			});
		}
		let arr = []; arr[0] = latestOpenKey
		sessionStorage.setItem('openKeys', JSON.stringify(arr));
	}
	SignOut = () => {
		confirm({
			title: 'Do you Want to sign out?',
			icon: <ExclamationCircleOutlined />,
			onOk() {
				sessionStorage.removeItem('openKeys');
				sessionStorage.removeItem('selectedKeys');
				sessionStorage.removeItem('isLogin');
				message.success('Sign out success!')
				setTimeout(() => {
					history.push('/');
				}, 1000);
			},
			onCancel() { },
		});
	}

	render() {
		const { menuList, selectedKeys, openKeys } = this.state
		const { pathname } = this.props.location
		let hostname,pagename = ''
		if (pathname !== '/home') {
			menuList.map(item => {
				item.children.map(sub => {
					if (sub.path == pathname) {
						hostname = item.name
						pagename = sub.name
					}
				})
			})
		}
		return (
			<>
				{
					pathname === '/' ? (<Redirect to={'/home'} />) : (
						<Layout style={{ height: '100%' }}>
							<Header style={{ background: '#275bf5', height: '55px' }}>
								<img className={styles.projectLogo} src={require('@/assets/rice.png')} height={20} alt=""/>
								<span className={styles.projectTitle}>Umi 3.x Project Test</span>
								<span className={styles.loginOut} onClick={this.SignOut}>Sign out</span>
							</Header>
							<Layout>
								<Sider width={200}>
									<Menu mode="inline" theme="dark" selectedKeys={selectedKeys} openKeys={openKeys} onOpenChange={this.onOpenChange} onSelect={this.selectChange} style={{ height: '100%' }}>
										<Menu.Item key="0"><Link to="/home">Home</Link></Menu.Item>
										{
											menuList && menuList.map(item => {
												return (
													<SubMenu key={item.id} title={<span>{item.name}</span>}>
														{
															item.children && item.children.map(sitem => {
																return (
																	<Menu.Item key={sitem.id}><Link to={sitem.path}>{sitem.name}</Link></Menu.Item>
																)
															})
														}
													</SubMenu>
												)
											})
										}
									</Menu>
								</Sider>
								<Content style={{ padding: '20px' }}>
									{
										pathname == '/home' ? '' : (
											<Breadcrumb style={{ marginBottom: '10px' }}>
												<Breadcrumb.Item>
													{hostname}
												</Breadcrumb.Item>
												<Breadcrumb.Item>
													<a href="">{pagename}</a>
												</Breadcrumb.Item>
											</Breadcrumb>
										)
									}
									{this.props.children}
								</Content>
							</Layout>
						</Layout>
					)
				}
			</>
		);
	}
}
export default Main;